<template>
  <div id="releaseProducts">
    <div id="rPmain">
      <div id="rPheader">发布你的二手商品，为它找一个好去处</div>

      <div id="productInfo">
        <!-- <form action="http://localhost:8000/releaseProducts" id="productInfo" method="post" role="form" enctype="multipart/form-data"> -->
        <span
          >商品图片：
          <input
            type="file"
            accept="image/*"
            id="image"
            name="image"
            @change="getFile1($event)"
            required
          />
        </span>
        <span
          >商品名字：<input
            id="name"
            type="text"
            name="name"
            v-model="name"
            placeholder="取个让人印象深刻的名字吧"
            style="width: 300px; outline: none"
            required
        /></span>
        <span id="kinds">
          产品分类：
          <input type="radio" name="type" value="1" v-model="type" />电子产品
          <input type="radio" name="type" value="2" v-model="type" />学习文具
          <input type="radio" name="type" value="3" v-model="type" />生活用品
          <input type="radio" name="type" value="4" v-model="type" />美妆服饰
          <input type="radio" name="type" value="5" v-model="type" />教材图书
          <input type="radio" name="type" value="6" v-model="type" />食品饮料
          <input type="radio" name="type" value="7" v-model="type" />精美礼品
          <input type="radio" name="type" value="8" v-model="type" />休闲娱乐
          <input type="radio" name="type" value="9" v-model="type" />其他
        </span>
        <span
          >出售单价：<input
            id="price"
            type="text"
            v-model="price"
            style="width: 80px; outline: none"
            name="price"
            required
          />&nbsp;元</span
        >
        <span>
          商品数量：<i class="el-icon-remove-outline" @click="remove"></i>
          <input
            type="text"
            style="width: 80px"
            id="number"
            name="number"
            v-model="number"
          />
          <i class="el-icon-circle-plus-outline" @click="add"></i>
        </span>
        <span id="description">
          <span>商品描述：</span>
          <textarea
            name="description"
            cols="30"
            rows="10"
            v-model="description"
            placeholder="如：这本书最后几章有少许缺页，不影响内容理解，介意者慎入！"
          ></textarea>
        </span>
        <span>
          交易时间及地点(选择一个每周相对固定的空闲时间和交易地点)：
          <!-- <select name="time" id="">
                        <option value="Mon">周一</option>
                        <option value="Tue">周二</option>
                        <option value="Wdn">周三</option>
                        <option value="Thu">周四</option>
                        <option value="Fri">周五</option>
                        <option value="Sat">周六</option>
                        <option value="Sun">周日</option>
                    </select> -->
          <input
            type="text"
            id="timeAndPlace"
            v-model="timeAndPlace"
            placeholder="如：每周三下午两点绿园北门"
            name="timeAndPlace"
            required
            autofocus
          />
        </span>
        <span>
          卖家收款码：
          <input
            type="file"
            accept="image/*"
            id="sellerCode"
            @change="getFile2($event)"
            name="sellerCode"
            required
          />
        </span>
        <span>
          卖家电话：
          <input
            type="text"
            id="sellerPhone"
            name="sellerPhone"
            v-model="sellerPhone"
            required
          />
        </span>
        <i class="el-button" @click="release">发布商品</i>
        <!-- </form> -->
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../network/request";

export default {
  name: "releaseProducts",
  data() {
    return {
      image: "",
      name: "",
      type: "",
      price: "",
      number: 1,
      description: "",
      timeAndPlace: "",
      sellerCode: "",
      sellerPhone: "",
    };
  },
  methods: {
    add() {
      this.number++;
    },
    remove() {
      if (this.number > 1) this.number--;
    },
    getFile1(event) {
      (this.image = event.target.files[0]), console.log(this.image);
    },
    getFile2(event) {
      (this.sellerCode = event.target.files[0]), console.log(this.sellerCode);
    },
    release() {
      let formdata = new FormData();
      if (
        !this.image ||
        !this.name ||
        !this.type ||
        !this.price ||
        !this.number ||
        !this.description ||
        !this.timeAndPlace ||
        !this.sellerCode ||
        !this.sellerPhone ||
        this.sellerPhone.length != 11
      ) {
        this.$message({
          message: "请填写完整正确信息再发布需求",
          type: "warning",
        });
        return;
      }
      formdata.append("image", this.image);
      formdata.append("name", this.name);
      formdata.append("type", this.type);
      formdata.append("price", this.price);
      formdata.append("number", this.number);
      formdata.append("description", this.description);
      formdata.append("timeAndPlace", this.timeAndPlace);
      formdata.append("sellerCode", this.sellerCode);
      formdata.append("sellerPhone", this.sellerPhone);
      for (var value of formdata.values()) {
        console.log(value);
      }
      const option = {
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formdata,
        url: "/releaseProducts",
      };
      request(option).then((res) => {
        console.log(res.data);
        if (res.data.res == 1) {
          this.$message({
            message: "发布成功！",
            type: "success",
          });
          this.$router.push({
            path: "/",
          });
        }
      });
      // .catch(err => {
      //     this.$message.error("注册失败了~请检查网络并再次尝试");
      //     return;
      // });
    },
  },
};
</script>

<style scoped>
#rPmain {
  background-color: white;
}

#rPheader {
  padding: 20px;
  border-bottom: 1px solid #000;
}

#productInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
  height: 600px;
}

input {
  outline: none;
  font-size: 16px;
  padding: 2px;
}

#image,
#name,
#price,
#kinds input,
textarea,
#timeAndPlace,
#sellerPhone {
  margin-left: 20px;
}

#image {
  height: 25px;
}

.el-icon-remove-outline {
  margin-left: 20px;
  margin-right: 10px;
}

.el-icon-circle-plus-outline {
  margin-left: 10px;
}

#description {
  display: flex;
  align-items: flex-start;
}

#description textarea {
  height: 100px;
  width: 400px;
  outline: none;
  padding: 5px;
  font-family: "Microsoft Yahei";
  font-size: 16px;
}

#timeAndPlace {
  width: 300px;
}

.el-button {
  margin-left: 900px;
  height: 40px;
  font-weight: bold;
  font-style: normal;
}

.el-button {
  background-color: rgb(255, 0, 54);
  color: #fff;
}
</style>
